<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>相书保险</title>
    <link rel="stylesheet" href="../css/project.css">
    <script src="../js/libs/jquery-3.0.0.min.js"></script>
    <script src="../js/libs/jquery-weui.min.js"></script>
    <script src="../js/libs/vue2.0.js"></script>
    <script src="../js/project.js"></script>
    <style>
        body{background-color: #f2f3f8;}
        .weui_cells:before,.weui_cells:after{display: none;}
        .u-card{margin: 10px 10px;}
        .weui_cells_title{font-size: 12px;color: #8a90af;margin-top: 15px;}
        /* 图标 */
        .order_id{font-size: 14px;color: #68709a;white-space: nowrap;}
        .order_title{font-size: 16px;line-height:30px;color: #333;}
        .order_price{font-size: 23px;color: #333;}
        .order_protectedPerson{font-size: 12px;color:#68709a; }
        .weui_cell.bottom{font-size: 12px;color: #68709a;margin-left: 65px;}
        .weui_cell.bottom:before{border-top: dashed 1px #bababa;}
        .weui_cell.bottom .weui_cell_ft{color: #68709a;}

        .weui_btn{line-height: 25px;font-size: 13px;}
        .weui_btn_plain_default{background-color: #fff;}
    </style>
</head>
<body>
<div id="app">
    <div class="weui_cells_title">待支付</div>
    <div class="weui_cells u-card" style="background-color: #fff;" >
        <div class="weui_cell top" style="padding-bottom: 4px;">
            <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-accepted"></i></div>
            <div class="weui_cell_bd weui_cell_primary">
                <div class="order_id">订单号:23112837862345</div>
                <h4 class="order_title">一年期综合意外险</h4>
                <div class="order_protectedPerson">被保人:***</div>
            </div>
            <div class="weui_cell_ft order_price">￥69</div>
        </div>
        <div class="weui_cell bottom" >
            <div class="weui_cell_bd weui_cell_primary" style="margin:0 15px;text-align: center;">
                <a class="weui_btn" href="../update.html" style="display: inline-block;width: 120px;">修改信息</a>
            </div>
        </div>
    </div>


    <div class="weui_cells_title">已生效</div>
    <div class="weui_cells u-card" style="background-color: #fff;" >
        <div class="weui_cell top" style="padding-bottom: 4px;">
            <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-success"></i></div>
            <div class="weui_cell_bd weui_cell_primary">
                <div class="order_id">订单号:23112837862345</div>
                <h4 class="order_title">一年期综合意外险</h4>
                <div class="order_protectedPerson">被保人:***</div>
            </div>
            <div class="weui_cell_ft order_price">￥69</div>
        </div>
        <div class="weui_cell bottom" >
            <div class="weui_cell_bd weui_cell_primary" style="margin:0 15px;text-align: center;">
                <a class="weui_btn" href="page8.2-modifyInsurence.html" style="display: inline-block;width: 120px;">修改信息</a>
            </div>
        </div>
    </div>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                /* 待支付订单 */
                unPayList: [
                    {
                        orderId:'',
                        productId:'',
                        productName:'',
                        insurantName:'',
                        premium:'',
                        policyStartTime:'',
                        policyEndTime:''
                    }
                ],
                /* 已生效保单 */
                effectList: [
                    {
                        orderId:'',
                        productId:'',
                        productName:'',
                        insurantName:'',
                        premium:'',
                        policyStartTime:'',
                        policyEndTime:''
                    }
                ]

            }
        },
        methods: {
            jumpToDetail: function () {
                window.location.href = '../policyDetail.html';
            }
        },
        created: function () {
            // 获取订单和保单的列表
            var url = './data/orderList.json';
            $.get(url, function (data) {
                data = JSON.parse(data);
                vm.unPayList = data.unPayList;
                vm.effectList = data.effectList;
            })
        }
    })
</script>

</body>
</html>